<template>
  <div class="card">
    <el-tabs type="card" @tab-click="handelclick">
      <el-tab-pane label="全部" name="" />
      <el-tab-pane v-for="item in tabArr" :key="item.label" :label="item.label" :name="item.name" />
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    tabArr: {
      type: Array,
      default: function() {
        return [
          { label: '餐台', name: '1-1' },
          { label: '餐椅', name: '1-7' },
          { label: '管材', name: '3-1-01' },
          { label: '包材', name: '4-3' },
          { label: '泡沫', name: '3-2-01' },
          { label: '软体', name: '4-2' },
          { label: '下架', name: '2-2' },
          { label: '布', name: '3-1-02' },
          { label: '瓷砖', name: '3-1-08' },
          { label: '铁片', name: '3-3-01' },
          { label: '螺丝', name: '3-3-02' },
          { label: '弹簧', name: '3-3-08' }
        ]
      }
    },
    field: {
      type: String,
      default: 'fnumber'
    }
  },
  data() {
    return {}
  },
  methods: {
    // 点击标签页搜索
    handelclick(tab) {
      const arr = [{ field: this.field, seach: tab.name, fid: 12 }]
      this.$emit('search', arr)
    }
  }
}
</script>
<style lang="scss" scoped>
.card {
  .el-tabs {
    position: absolute;
    width: 450px;
    &::v-deep .el-tabs__nav-next, &::v-deep .el-tabs__nav-prev {
      line-height: 30px!important;
    }
  }
}
</style>
